<template>
  <section
    class="select-date-wrap"
    @click="handleShowProject"
  >
    <p class="text-wrap">
      <span class="text">{{ formatDate(currentDate) }}</span>
    </p>

    <select-date-popup
      v-model:visible="popupDisplay"
      :current-value="currentDate"
      :columns-type="columnsType"
      :title="title"
      :min-date="minDate"
      :max-date="maxDate"
      @change="handleDateChange"
    />
  </section>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { PropType } from 'vue';

import SelectDatePopup from './components/select-date-popup.vue';

import type { DatePickerColumnType } from 'vant';

const emit = defineEmits(['update:modelValue', 'change']);

const props = defineProps({
  modelValue: {
    type: String, // 标准时间格式：2022-01-01
    default: '',
  },
  title: {
    type: String,
    default: '选择时间',
  },
  columnsType: {
    type: Array as PropType<DatePickerColumnType[]>,
    default: () => ['year', 'month', 'day'],
  },
  // 时间格式化符 '-' '.' '/' '' 'ZH'，控制时间显示格式
  format: {
    type: String,
    default: '-',
  },
  minDate: {
    type: Date as PropType<Date>,
    default: () => {
      const today = new Date();
      today.setFullYear(today.getFullYear() - 10);
      return today;
    },
  },
  maxDate: {
    type: Date as PropType<Date>,
    default: () => {
      const today = new Date();
      today.setFullYear(today.getFullYear() + 10);
      return today;
    },
  },
});

const popupDisplay = ref(false);
const handleShowProject = () => {
  popupDisplay.value = true;
};

const currentDate = ref('');
const currentDateSplit = ref<string[]>([]);
watch(
  () => props.modelValue,
  (newValue) => {
    currentDate.value = newValue || '';
    currentDateSplit.value = newValue ? newValue.split('-') : [];
  },
  {
    immediate: true,
  }
);

const formatDate = (date:string) => {
  const values = date.split('-');
  const [year = new Date().getFullYear(), month = '01', day = '01'] = values;
  if (props.format === 'ZH') {
    if (props.columnsType.length === 3) {
      return `${year}年${month}月${day}日`;
    }
    if (props.columnsType.length === 2) {
      return `${year}年${month}月`;
    }
    return `${year}年`;
  }

  if (props.columnsType.length === 3) {
    return `${year}${props.format}${month}${props.format}${day}`;
  }
  if (props.columnsType.length === 2) {
    return `${year}${props.format}${month}`;
  }
  return `${year}`;
};

const handleDateChange = (date:string) => {
  emit('update:modelValue', date);
  emit('change', date);
};
</script>

<style lang="scss" scoped>
  .select-date-wrap {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .text-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--#{$ns}-font-size-base);
      color: var(--#{$ns}-text-color-primary);

      .text {
        line-height: normal;
        white-space: nowrap;
      }
    }
  }
</style>
